<template>
  <basic-container>
    <el-form
        ref="sealFormRef"
        :model="sealForm"
        :rules="sealFormRules"
        >
      <h3>基本信息</h3>
      <el-form-item label="印章名称" label-width="100px" prop="sealName">
        <el-input style="width: 400px" v-model="sealForm.sealName"></el-input>
      </el-form-item>
      <el-form-item label="印章内容" label-width="100px" prop="sealContent" >
        <el-input style="width: 400px" v-model="sealForm.sealContent" @blur="previewSeal"></el-input>
      </el-form-item>
      <el-form-item label="内容规则" label-width="100px" prop="sealRule">
        <el-select size="large" v-model="sealRule" @change="previewSeal">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-divider />

      <h3>制章内容</h3>
      <el-form-item label="制章方式" label-width="100px" prop="sealWay">
        <el-radio-group v-model="sealForm.sealWay" size="large">
          <el-radio-button label="1">模板印章</el-radio-button>
<!--          <el-radio-button label="2">本地上传</el-radio-button>
          <el-radio-button label="3">手绘印章</el-radio-button>-->
        </el-radio-group>
      </el-form-item>

      <h4>选择印章样式</h4>
      <el-form-item label="印章样式" label-width="100px" prop="sealStyle">
        <div class="style-list">
          <div class="style-item" @click="setStyle(1)">
            <div :class="sealForm.sealStyle === 1 ?'item-border__active':'item-border'">
              <div class="item-pic"><img :src="img1"></div>
            </div>
            <div class="item-name"><p>矩形章-带框</p></div>
          </div>
          <div class="style-item" @click="setStyle(2)">
            <div :class="sealForm.sealStyle === 2 ?'item-border__active':'item-border'">
              <div class="item-pic"><img :src="img2"></div>
            </div>
            <div class="item-name"><p>矩形章-不带框</p></div>
          </div>
          <div class="style-item" @click="setStyle(3)">
            <div :class="sealForm.sealStyle === 3 ?'item-border__active':'item-border'">
              <div class="item-pic"><img :src="img3"></div>
            </div>
            <div class="item-name"><p>方形左大字-带框</p></div>
          </div>
          <div class="style-item" @click="setStyle(4)">
            <div :class="sealForm.sealStyle === 4 ?'item-border__active':'item-border'">
              <div class="item-pic"><img :src="img4"></div>
            </div>
            <div class="item-name"><p>方形左大字-不带框</p></div>
          </div>
          <div class="style-item" @click="setStyle(5)">
            <div :class="sealForm.sealStyle === 5 ?'item-border__active':'item-border'">
              <div class="item-pic"><img :src="img5"></div>
            </div>
            <div class="item-name"><p>方形右大字-带框</p></div>
          </div>
          <div class="style-item" @click="setStyle(6)">
            <div :class="sealForm.sealStyle === 6 ?'item-border__active':'item-border'">
              <div class="item-pic"><img :src="img6"></div>
            </div>
            <div class="item-name"><p>方形右大字-不带框</p></div>
          </div>
        </div>
        <div class="style-curr">
          <div class="curr-border"><img :src="imgNow" style="width: 400px;height: 400px"></div>
        </div>
      </el-form-item>

      <el-form-item label="印章颜色" label-width="100px" prop="sealColor">
        <div class="print-color-list">
          <div class="print-color-item" @click="setColor(1)">
            <el-icon :style="sealForm.sealColor === 1 ? '':'display: none'"><Check /></el-icon>
          </div>
          <div class="print-color-item" @click="setColor(2)">
            <el-icon :style="sealForm.sealColor === 2 ? '':'display: none'"><Check /></el-icon>
          </div>
          <div class="print-color-item" @click="setColor(3)">
            <el-icon :style="sealForm.sealColor === 3 ? '':'display: none'"><Check /></el-icon>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="不透明度" label-width="100px" prop="sealOpacity">
        <el-slider v-model="sealForm.sealOpacity" :min="20" :max="100" style="width: 400px;" @change="previewSeal"/>
      </el-form-item>

      <el-form-item>
        <el-button size="large" type="primary" icon="Stamp" @click="submit">提交</el-button>
        <el-button size="large" @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </basic-container>
</template>

<script setup>
import {ref,getCurrentInstance} from 'vue';
import img1 from '../../img/1.png'
import img2 from '../../img/2.png'
import img3 from '../../img/3.png'
import img4 from '../../img/4.png'
import img5 from '../../img/5.png'
import img6 from '../../img/6.png'
import { Check } from '@element-plus/icons'
import activeImg from  '../../img/pri1.png'
import {addSealApi, addSealDetailApi, deleteFileArrayApi, getPrivateSealApi} from '../../api/seal';
import {ElMessage} from 'element-plus';
import {useStore} from 'vuex';
const {proxy} = getCurrentInstance()
const options = [{
  value: '无',
  label: "无",
},{
  value: '带\"印\"',
  label: "带\"印\"",
},{
  value: '带\"之印\"',
  label: "带\"之印\"",
}]
const sealRule = ref("无")

//印章详细信息
const sealForm = ref({
  sealName: '',
  sealContent: '',
  sealWay: 1,
  sealStyle: 1,
  sealColor: 1,
  sealOpacity: 80,
  sealRule: 1,
  sealType: 0,
  sealPath: ''
})

//印章归属者
const baseSealForm = ref({
  sealName: '',
  sealPath: '',
  sealStatus: 1,
  sealCreater: '',
  sealAuthorizeNum: 0,
})

const sealFormRef = ref(null)
const sealFormRules = ref({
  sealName: [{required: true, message: '请输入印章名称', trigger: "blur"}],
  sealContent: [{required: true, message: '请输入印章内容', trigger: "blur"},
    { min: 2, max: 4, message: '请输入2~4个字符', trigger: 'blur' },],
  sealWay: [{required: true, trigger: "blur"}],
  sealStyle: [{required: true, trigger: "blur"}],
  sealColor: [{required: true, trigger: "blur"}],
  sealOpacity: [{required: true, trigger: "blur"}],
  sealRule: [{required: true, trigger: "blur"}],
})

const setStyle = (index) => {
  sealForm.value.sealStyle = index
  previewSeal()
}

const setColor = (color) => {
  sealForm.value.sealColor = color
  previewSeal()
}

const imgNow = ref(activeImg)
//存储预览的所有图片
const tempImgArray = ref([])
const previewSeal = () => {
  sealFormRef.value.validateField('sealContent',(valid)=>{
    if(valid){
      sealForm.value.sealRule = (sealRule.value === "无") ? 1 : ((sealRule.value === "带\"印\"") ? 2 : 3);
      getPrivateSealApi(sealForm.value)
      .then(res=>{
        imgNow.value = res.data.result
        tempImgArray.value.push(imgNow.value.split(".com/")[1])
      })
    }else {
      ElMessage.error("请输入印章内容！")
    }
  })
}

/**
 * 保存印章信息到数据库中
 */
const submit = () => {
  sealFormRef.value.validate((valid) =>{
    if (valid){
      sealForm.value.sealPath = imgNow.value
      addSealDetailApi(sealForm.value).then(res=>{
        if(res.data.responseSuccess){
          ElMessage.success("创建印章成功！")
          tempImgArray.value.pop()
          deleteFile(tempImgArray.value)
          addSeal()
        }else {
          ElMessage.error("创建失败，请重试！")
        }
      })
    }
  })
}
const store = useStore()
const userId = store.getters.userId

/**
 * 增加印章基础数据
 */
const addSeal = () => {
  baseSealForm.value.sealName = sealForm.value.sealName
  baseSealForm.value.sealPath = sealForm.value.sealPath
  baseSealForm.value.sealCreater = userId
  addSealApi(baseSealForm.value).then(res=>{
    if(res.data.responseSuccess){
      proxy.$router.push("/seal/seal-con")
    }else {
      ElMessage.error("创建失败，请重试！")
    }
  })
}

/**
 * 删除无用的图片
 * @param delArray
 */
const deleteFile = (delArray) => {
  let fileArray = delArray.toString()
  if(delArray.length !== 0){
    deleteFileArrayApi(fileArray).then(res=>{
      tempImgArray.value = []
    })
  }
}

/**
 * 取消操作
 */
const cancel = () => {
  deleteFile(tempImgArray.value)
  proxy.$router.push("/seal/seal-con")
}

</script>

<style scoped>
/deep/ .el-card__body{
  padding: 20px 60px;
}
/deep/ .el-form-item--default .el-form-item__content{
  margin-left: 20px;
}
.style-list{
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 480px;
}
.style-list .style-item{
  margin-top: 6px;
  margin-right: 12px;
  text-align: center;
}
.style-item .item-border{
  position: relative;
  width: 80px;
  height: 80px;
  padding: 10px;
  align-items: center;
  border: 1px solid #e4e6e9;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: none;
  transition: all .2s;
}
.style-item .item-border__active{
  position: relative;
  width: 80px;
  height: 80px;
  padding: 10px;
  align-items: center;
  border: 1px solid #0975e0;
  border-radius: 4px;
  cursor: pointer;
  -webkit-box-shadow: 0 0 12px 3px rgb(0 0 0 / 10%);
  box-shadow: 0 0 12px 3px rgb(0 0 0 / 10%);
  transition: all .2s;
}
.style-item .item-border:hover{
  border-color: #0975e0;
  -webkit-box-shadow: 0 0 12px 3px rgb(0 0 0 / 10%);
  box-shadow: 0 0 12px 3px rgb(0 0 0 / 10%);
  transition: all .2s;
}
.item-pic{
  width: 100%;
  height: 100%;
  display: flex;
}
.item-pic img{
  width: 100%;
  align-self: center;
}
.style-item .item-name{

}
.style-item .item-name p{
  margin: 0;
}

.style-curr{
  position: absolute;
  left: 520px;
  top: 6px;
}
.style-curr .curr-border{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 240px;
  height: 250px;
  border: 1px solid #e4e4e4;
  border-radius: 2px;
}
.style-curr .curr-border img{
  width: 200px;
}

.print-color-list{
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 4px;
}
.print-color-list .print-color-item{
  margin-right: 16px;
  width: 48px;
  height: 32px;
  text-align: center;
  line-height: 35px;
  background-color: red;
}
.print-color-item:nth-child(1){
  background-color: red;
}
.print-color-item:nth-child(2){
  background-color: black;
}
.print-color-item:nth-child(3){
  background-color: blue;
}
.print-color-item:nth-child(4){
  background-color: purple;
}
.print-color-item i{
  color: white;
}

/deep/ .el-button--primary{
  background-color: ;
  border-color: ;
}
</style>
